<template>
  <div class="knowledge-manager">
    <!-- 管理器头部 -->
    <div class="manager-header">
      <div class="header-info">
        <h3 class="manager-title">
          <Icon name="database" :size="20" />
          知识库管理
        </h3>
        <p class="manager-description">管理和组织您的知识库内容</p>
      </div>

      <div class="header-actions">
        <Button type="primary" icon="plus" @click="createKnowledgeBase">
          新建知识库
        </Button>

        <Button type="secondary" icon="upload" @click="importKnowledge">
          导入
        </Button>
      </div>
    </div>

    <!-- 搜索和过滤 -->
    <div class="search-filters">
      <div class="search-section">
        <Input
          v-model="searchQuery"
          placeholder="搜索知识库..."
          prefix-icon="search"
          clearable
          class="search-input"
        />
      </div>

      <div class="filter-section">
        <select v-model="selectedCategory" class="filter-select">
          <option value="">全部分类</option>
          <option value="general">通用</option>
          <option value="technical">技术</option>
          <option value="business">商业</option>
          <option value="personal">个人</option>
          <option value="academic">学术</option>
        </select>

        <select v-model="selectedStatus" class="filter-select">
          <option value="">全部状态</option>
          <option value="active">活跃</option>
          <option value="inactive">非活跃</option>
          <option value="processing">处理中</option>
        </select>

        <Button
          type="secondary"
          variant="text"
          icon="filter"
          @click="toggleAdvancedFilters"
          :class="{ active: showAdvancedFilters }"
        >
          高级筛选
        </Button>
      </div>
    </div>

    <!-- 高级筛选 -->
    <div v-if="showAdvancedFilters" class="advanced-filters">
      <div class="filter-row">
        <div class="filter-group">
          <label class="filter-label">创建时间</label>
          <div class="date-range">
            <input v-model="filters.dateFrom" type="date" class="date-input" />
            <span class="date-separator">至</span>
            <input v-model="filters.dateTo" type="date" class="date-input" />
          </div>
        </div>

        <div class="filter-group">
          <label class="filter-label">文档数量</label>
          <div class="range-inputs">
            <input
              v-model.number="filters.minDocs"
              type="number"
              placeholder="最少"
              class="range-input"
            />
            <span class="range-separator">-</span>
            <input
              v-model.number="filters.maxDocs"
              type="number"
              placeholder="最多"
              class="range-input"
            />
          </div>
        </div>

        <div class="filter-group">
          <label class="filter-label">标签</label>
          <Input
            v-model="filters.tags"
            placeholder="输入标签，用逗号分隔"
            size="small"
          />
        </div>
      </div>
    </div>

    <!-- 知识库列表 -->
    <div class="knowledge-list">
      <!-- 列表头部 -->
      <div class="list-header">
        <div class="view-controls">
          <Button
            type="secondary"
            variant="text"
            :icon="viewMode === 'grid' ? 'grid' : 'list'"
            @click="toggleViewMode"
            :title="viewMode === 'grid' ? '网格视图' : '列表视图'"
          />

          <select v-model="sortBy" class="sort-select">
            <option value="name">按名称排序</option>
            <option value="created">按创建时间</option>
            <option value="updated">按更新时间</option>
            <option value="docs">按文档数量</option>
            <option value="size">按大小</option>
          </select>

          <Button
            type="secondary"
            variant="text"
            :icon="sortOrder === 'asc' ? 'arrow-up' : 'arrow-down'"
            @click="toggleSortOrder"
            :title="sortOrder === 'asc' ? '升序' : '降序'"
          />
        </div>

        <div class="list-stats">
          <span class="stats-text">
            共 {{ filteredKnowledgeBases.length }} 个知识库
          </span>
        </div>
      </div>

      <!-- 网格视图 -->
      <div v-if="viewMode === 'grid'" class="grid-view">
        <Card
          v-for="kb in paginatedKnowledgeBases"
          :key="kb.id"
          class="knowledge-card"
          :class="{ selected: selectedKnowledgeBases.includes(kb.id) }"
          @click="selectKnowledgeBase(kb)"
        >
          <template #header>
            <div class="card-header">
              <div class="kb-icon">
                <Icon :name="getKnowledgeBaseIcon(kb.category)" :size="24" />
              </div>

              <div class="kb-actions">
                <Button
                  type="secondary"
                  variant="text"
                  icon="more-horizontal"
                  size="small"
                  @click.stop="showKnowledgeBaseMenu(kb, $event)"
                />
              </div>
            </div>
          </template>

          <div class="kb-info">
            <h4 class="kb-name">{{ kb.name }}</h4>
            <p class="kb-description">{{ kb.description || "暂无描述" }}</p>

            <div class="kb-meta">
              <div class="kb-stats">
                <span class="stat-item">
                  <Icon name="file-text" :size="12" />
                  {{ kb.documentCount || 0 }} 文档
                </span>
                <span class="stat-item">
                  <Icon name="database" :size="12" />
                  {{ formatSize(kb.size || 0) }}
                </span>
              </div>

              <div class="kb-status">
                <span class="status-badge" :class="`status-${kb.status}`">
                  {{ getStatusText(kb.status) }}
                </span>
              </div>
            </div>

            <div class="kb-tags">
              <span
                v-for="tag in kb.tags?.slice(0, 3)"
                :key="tag"
                class="kb-tag"
              >
                {{ tag }}
              </span>
              <span
                v-if="kb.tags && kb.tags.length > 3"
                class="kb-tag more-tags"
              >
                +{{ kb.tags.length - 3 }}
              </span>
            </div>
          </div>

          <template #footer>
            <div class="card-footer">
              <span class="update-time">
                {{ formatTime(kb.updatedAt) }}
              </span>

              <div class="quick-actions">
                <Button
                  type="primary"
                  size="small"
                  @click.stop="openKnowledgeBase(kb)"
                >
                  打开
                </Button>
              </div>
            </div>
          </template>
        </Card>

        <!-- 空状态 -->
        <div v-if="filteredKnowledgeBases.length === 0" class="empty-state">
          <Icon name="database" :size="64" class="empty-icon" />
          <h4 class="empty-title">暂无知识库</h4>
          <p class="empty-description">
            {{
              searchQuery ? "未找到匹配的知识库" : "开始创建您的第一个知识库"
            }}
          </p>
          <Button
            v-if="!searchQuery"
            type="primary"
            icon="plus"
            @click="createKnowledgeBase"
          >
            创建知识库
          </Button>
        </div>
      </div>

      <!-- 列表视图 -->
      <div v-else class="list-view">
        <Table
          :columns="tableColumns"
          :data="paginatedKnowledgeBases"
          :loading="loading"
          :selection="true"
          @selection-change="handleSelectionChange"
          @row-click="openKnowledgeBase"
        >
          <template #name="{ row }">
            <div class="table-name-cell">
              <Icon :name="getKnowledgeBaseIcon(row.category)" :size="16" />
              <span class="name-text">{{ row.name }}</span>
            </div>
          </template>

          <template #status="{ row }">
            <span class="status-badge" :class="`status-${row.status}`">
              {{ getStatusText(row.status) }}
            </span>
          </template>

          <template #size="{ row }">
            {{ formatSize(row.size || 0) }}
          </template>

          <template #updatedAt="{ row }">
            {{ formatTime(row.updatedAt) }}
          </template>

          <template #actions="{ row }">
            <div class="table-actions">
              <Button
                type="secondary"
                variant="text"
                icon="eye"
                size="small"
                @click.stop="openKnowledgeBase(row)"
                title="查看"
              />

              <Button
                type="secondary"
                variant="text"
                icon="edit"
                size="small"
                @click.stop="editKnowledgeBase(row)"
                title="编辑"
              />

              <Button
                type="danger"
                variant="text"
                icon="trash"
                size="small"
                @click.stop="deleteKnowledgeBase(row)"
                title="删除"
              />
            </div>
          </template>
        </Table>
      </div>

      <!-- 分页 -->
      <div v-if="totalPages > 1" class="pagination">
        <Button
          type="secondary"
          variant="text"
          icon="chevron-left"
          :disabled="currentPage === 1"
          @click="currentPage--"
        />

        <span class="page-info">
          第 {{ currentPage }} 页，共 {{ totalPages }} 页
        </span>

        <Button
          type="secondary"
          variant="text"
          icon="chevron-right"
          :disabled="currentPage === totalPages"
          @click="currentPage++"
        />
      </div>
    </div>

    <!-- 批量操作栏 -->
    <div v-if="selectedKnowledgeBases.length > 0" class="batch-actions">
      <div class="batch-info">
        已选择 {{ selectedKnowledgeBases.length }} 个知识库
      </div>

      <div class="batch-buttons">
        <Button type="secondary" icon="download" @click="exportSelected">
          导出
        </Button>

        <Button type="danger" icon="trash" @click="deleteSelected">
          删除
        </Button>

        <Button type="secondary" variant="text" @click="clearSelection">
          取消选择
        </Button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useKnowledgeStore } from "@/stores/knowledge";
import Icon from "@/components/common/Icon.vue";
import Button from "@/components/common/Button.vue";
import Input from "@/components/common/Input.vue";
import Card from "@/components/common/Card.vue";
import Table from "@/components/common/Table.vue";

interface KnowledgeBase {
  id: string;
  name: string;
  description?: string;
  category: string;
  status: "active" | "inactive" | "processing";
  documentCount: number;
  size: number;
  tags?: string[];
  createdAt: number;
  updatedAt: number;
}

interface Props {
  height?: string;
}

const props = withDefaults(defineProps<Props>(), {
  height: "600px",
});

const emit = defineEmits<{
  create: [];
  edit: [kb: KnowledgeBase];
  open: [kb: KnowledgeBase];
  delete: [kb: KnowledgeBase];
  import: [];
}>();

// Store
const knowledgeStore = useKnowledgeStore();

// 响应式数据
const loading = ref(false);
const searchQuery = ref("");
const selectedCategory = ref("");
const selectedStatus = ref("");
const showAdvancedFilters = ref(false);
const viewMode = ref<"grid" | "list">("grid");
const sortBy = ref("updated");
const sortOrder = ref<"asc" | "desc">("desc");
const currentPage = ref(1);
const pageSize = ref(12);
const selectedKnowledgeBases = ref<string[]>([]);

// 高级筛选
const filters = ref({
  dateFrom: "",
  dateTo: "",
  minDocs: null as number | null,
  maxDocs: null as number | null,
  tags: "",
});

// 计算属性
const knowledgeBases = computed(() => knowledgeStore.knowledgeBases);

// 过滤后的知识库
const filteredKnowledgeBases = computed(() => {
  let filtered = knowledgeBases.value;

  // 搜索过滤
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase().trim();
    filtered = filtered.filter(
      (kb) =>
        kb.name.toLowerCase().includes(query) ||
        kb.description?.toLowerCase().includes(query) ||
        kb.tags?.some((tag) => tag.toLowerCase().includes(query)),
    );
  }

  // 分类过滤
  if (selectedCategory.value) {
    filtered = filtered.filter((kb) => kb.category === selectedCategory.value);
  }

  // 状态过滤
  if (selectedStatus.value) {
    filtered = filtered.filter((kb) => kb.status === selectedStatus.value);
  }

  // 高级筛选
  if (showAdvancedFilters.value) {
    // 日期范围
    if (filters.value.dateFrom) {
      const fromDate = new Date(filters.value.dateFrom).getTime();
      filtered = filtered.filter((kb) => kb.createdAt >= fromDate);
    }

    if (filters.value.dateTo) {
      const toDate = new Date(filters.value.dateTo).getTime() + 86400000; // +1天
      filtered = filtered.filter((kb) => kb.createdAt < toDate);
    }

    // 文档数量范围
    if (filters.value.minDocs !== null) {
      filtered = filtered.filter(
        (kb) => kb.documentCount >= filters.value.minDocs!,
      );
    }

    if (filters.value.maxDocs !== null) {
      filtered = filtered.filter(
        (kb) => kb.documentCount <= filters.value.maxDocs!,
      );
    }

    // 标签过滤
    if (filters.value.tags.trim()) {
      const tags = filters.value.tags
        .split(",")
        .map((tag) => tag.trim().toLowerCase());
      filtered = filtered.filter((kb) =>
        kb.tags?.some((tag) =>
          tags.some((filterTag) => tag.toLowerCase().includes(filterTag)),
        ),
      );
    }
  }

  // 排序
  filtered.sort((a, b) => {
    let aValue: any, bValue: any;

    switch (sortBy.value) {
      case "name":
        aValue = a.name.toLowerCase();
        bValue = b.name.toLowerCase();
        break;
      case "created":
        aValue = a.createdAt;
        bValue = b.createdAt;
        break;
      case "updated":
        aValue = a.updatedAt;
        bValue = b.updatedAt;
        break;
      case "docs":
        aValue = a.documentCount;
        bValue = b.documentCount;
        break;
      case "size":
        aValue = a.size;
        bValue = b.size;
        break;
      default:
        return 0;
    }

    if (sortOrder.value === "asc") {
      return aValue > bValue ? 1 : -1;
    } else {
      return aValue < bValue ? 1 : -1;
    }
  });

  return filtered;
});

// 分页后的知识库
const paginatedKnowledgeBases = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredKnowledgeBases.value.slice(start, end);
});

const totalPages = computed(() => {
  return Math.ceil(filteredKnowledgeBases.value.length / pageSize.value);
});

// 表格列配置
const tableColumns = [
  { key: "name", title: "名称", width: "200px" },
  { key: "category", title: "分类", width: "100px" },
  { key: "status", title: "状态", width: "80px" },
  { key: "documentCount", title: "文档数", width: "80px" },
  { key: "size", title: "大小", width: "100px" },
  { key: "updatedAt", title: "更新时间", width: "120px" },
  { key: "actions", title: "操作", width: "120px" },
];

// 方法
const toggleAdvancedFilters = () => {
  showAdvancedFilters.value = !showAdvancedFilters.value;
};

const toggleViewMode = () => {
  viewMode.value = viewMode.value === "grid" ? "list" : "grid";
};

const toggleSortOrder = () => {
  sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
};

const getKnowledgeBaseIcon = (category: string): string => {
  const iconMap: Record<string, string> = {
    general: "database",
    technical: "code",
    business: "briefcase",
    personal: "user",
    academic: "book",
  };
  return iconMap[category] || "database";
};

const getStatusText = (status: string): string => {
  const statusMap: Record<string, string> = {
    active: "活跃",
    inactive: "非活跃",
    processing: "处理中",
  };
  return statusMap[status] || status;
};

const formatSize = (bytes: number): string => {
  if (bytes === 0) return "0 B";

  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));

  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};

const formatTime = (timestamp: number): string => {
  const date = new Date(timestamp);
  const now = new Date();
  const diff = now.getTime() - date.getTime();

  if (diff < 86400000) {
    // 小于1天
    return date.toLocaleTimeString("zh-CN", {
      hour: "2-digit",
      minute: "2-digit",
    });
  } else {
    return date.toLocaleDateString("zh-CN", { month: "short", day: "numeric" });
  }
};

// 知识库操作
const createKnowledgeBase = () => {
  emit("create");
};

const editKnowledgeBase = (kb: KnowledgeBase) => {
  emit("edit", kb);
};

const openKnowledgeBase = (kb: KnowledgeBase) => {
  emit("open", kb);
};

const deleteKnowledgeBase = async (kb: KnowledgeBase) => {
  if (confirm(`确定要删除知识库 "${kb.name}" 吗？此操作不可撤销。`)) {
    try {
      await knowledgeStore.deleteKnowledgeBase(kb.id);
      emit("delete", kb);
    } catch (error) {
      console.error("删除知识库失败:", error);
    }
  }
};

const importKnowledge = () => {
  emit("import");
};

// 选择操作
const selectKnowledgeBase = (kb: KnowledgeBase) => {
  const index = selectedKnowledgeBases.value.indexOf(kb.id);
  if (index > -1) {
    selectedKnowledgeBases.value.splice(index, 1);
  } else {
    selectedKnowledgeBases.value.push(kb.id);
  }
};

const handleSelectionChange = (selected: string[]) => {
  selectedKnowledgeBases.value = selected;
};

const clearSelection = () => {
  selectedKnowledgeBases.value = [];
};

// 批量操作
const exportSelected = () => {
  console.log("导出选中的知识库:", selectedKnowledgeBases.value);
};

const deleteSelected = async () => {
  if (
    confirm(
      `确定要删除选中的 ${selectedKnowledgeBases.value.length} 个知识库吗？`,
    )
  ) {
    try {
      await Promise.all(
        selectedKnowledgeBases.value.map((id) =>
          knowledgeStore.deleteKnowledgeBase(id),
        ),
      );
      clearSelection();
    } catch (error) {
      console.error("批量删除失败:", error);
    }
  }
};

// 右键菜单
const showKnowledgeBaseMenu = (kb: KnowledgeBase, event: Event) => {
  // 显示右键菜单
  console.log("显示知识库菜单:", kb, event);
};

// 生命周期
onMounted(() => {
  loadKnowledgeBases();
});

const loadKnowledgeBases = async () => {
  loading.value = true;
  try {
    await knowledgeStore.loadKnowledgeBases();
  } catch (error) {
    console.error("加载知识库失败:", error);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
/* 知识库管理器基础样式 */
.knowledge-manager {
  display: flex;
  flex-direction: column;
  height: v-bind(height);
  background-color: var(--bg-primary);
  border-radius: 12px;
  overflow: hidden;
}

/* 管理器头部 */
.manager-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
}

.header-info {
  flex: 1;
}

.manager-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.manager-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 搜索和过滤 */
.search-filters {
  display: flex;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-primary);
}

.search-section {
  flex: 1;
}

.search-input {
  max-width: 400px;
}

.filter-section {
  display: flex;
  gap: 8px;
  align-items: center;
}

.filter-select {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  min-width: 120px;
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* 高级筛选 */
.advanced-filters {
  padding: 16px 24px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.filter-row {
  display: flex;
  gap: 24px;
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.date-range,
.range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-input,
.range-input {
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 12px;
  width: 100px;
}

.date-separator,
.range-separator {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* 知识库列表 */
.knowledge-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 列表头部 */
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color);
}

.view-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sort-select {
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 12px;
}

.list-stats {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 网格视图 */
.grid-view {
  flex: 1;
  padding: 16px 24px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-content: start;
}

.knowledge-card {
  cursor: pointer;
  transition: all 0.2s ease;
}

.knowledge-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.knowledge-card.selected {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px var(--primary-color-light);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kb-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: var(--primary-color-light);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kb-info {
  padding: 16px 0;
}

.kb-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
  line-height: 1.3;
}

.kb-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kb-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.kb-stats {
  display: flex;
  gap: 12px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.kb-status .status-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
}

.status-active {
  background-color: var(--success-color-light);
  color: var(--success-color);
}

.status-inactive {
  background-color: var(--error-color-light);
  color: var(--error-color);
}

.status-processing {
  background-color: var(--warning-color-light);
  color: var(--warning-color);
}

.kb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kb-tag {
  padding: 2px 6px;
  background-color: var(--bg-tertiary);
  color: var(--text-tertiary);
  border-radius: 4px;
  font-size: 10px;
}

.kb-tag.more-tags {
  background-color: var(--primary-color-light);
  color: var(--primary-color);
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.update-time {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* 列表视图 */
.list-view {
  flex: 1;
  overflow: hidden;
}

.table-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.name-text {
  font-weight: 500;
}

.table-actions {
  display: flex;
  gap: 4px;
}

/* 空状态 */
.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.empty-icon {
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.empty-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 24px;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
}

.page-info {
  font-size: 14px;
  color: var(--text-secondary);
}

/* 批量操作栏 */
.batch-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background-color: var(--primary-color-light);
  border-top: 1px solid var(--primary-color);
}

.batch-info {
  font-size: 14px;
  color: var(--primary-color);
  font-weight: 500;
}

.batch-buttons {
  display: flex;
  gap: 8px;
}

/* 响应式 */
@media (max-width: 768px) {
  .manager-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .header-actions {
    justify-content: flex-end;
  }

  .search-filters {
    flex-direction: column;
    gap: 12px;
  }

  .filter-section {
    flex-wrap: wrap;
  }

  .filter-row {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .grid-view {
    grid-template-columns: 1fr;
    padding: 12px 16px;
  }

  .list-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .batch-actions {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .manager-header,
  .search-filters,
  .list-header {
    padding: 12px 16px;
  }

  .grid-view {
    padding: 8px 12px;
  }

  .kb-meta {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

/* 滚动条样式 */
.grid-view::-webkit-scrollbar {
  width: 6px;
}

.grid-view::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 3px;
}

.grid-view::-webkit-scrollbar-thumb {
  background: var(--text-tertiary);
  border-radius: 3px;
}

.grid-view::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}
</style>
